<template>
  <div class="app-container">
    <div>
      <el-table :data="tableData" border row-key="id" lazy
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
        <el-table-column label="序号" type="index" width="100" />
        <el-table-column label="编号" prop="serialNumber" />
        <el-table-column label="申请动火单位" prop="applyHotUnit" />
        <el-table-column label="动火施工单位" prop="hotConstructionUnit" />
        <el-table-column label="动火级别" prop="hotLevel" />
        <el-table-column label="动火地点" prop="hotPlace" />
        <el-table-column label="动火时间" prop="hotPlace">
          <template slot-scope="scope">
            {{ scope.row.hotTime | dateFormat('YYYY-MM-DD hh:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="动火内介质" prop="hotInnerMedium" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.confirmStatus == 0? "未确认":"已确认" }}
          </template>
        </el-table-column>
        <el-table-column label="延期开始时间">
          <template slot-scope="scope">
            <span v-if="scope.row.delayInfo">
              {{ scope.row.delayInfo.startTime | dateFormat("YYYY-MM-DD HH:mm") }}</span>
            <span v-else />
          </template>
        </el-table-column>
        <el-table-column label="延期结束时间">
          <template slot-scope="scope">
            <span v-if="scope.row.delayInfo">{{ scope.row.delayInfo.endTime | dateFormat("YYYY-MM-DD HH:mm") }}</span>
            <span v-else />
          </template>
        </el-table-column>

        <el-table-column :label="$t('table.actions')" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="info" round @click="viewHandle( scope.row.id)">{{ $t("table.see") }}
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <el-dialog title="查看" :visible.sync="viewDialog" width="60%" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close @close="modelClose1">

      <el-form ref="ruleForm" :model="obj">
        <div id="printMe">
          <!-- <div class="number">编号：{{ obj.serialNumber }}</div> -->
          <div class="title">动火作业许可证</div>
          <table>
            <tr>
              <td>编号</td>
              <td>{{ obj.serialNumber }}</td>
              <td>流水号</td>
              <td>{{ obj.singleNumber }}</td>
            </tr>
            <tr>
              <td>申请动火单位</td>
              <td>{{ obj.applyHotUnit }}</td>
              <td>动火施工单位</td>
              <td>{{ obj.hotConstructionUnit }}</td>
            </tr>
            <tr>
              <td>动火级别</td>
              <td>{{ obj.hotLevel }}</td>
              <td>动火地点</td>
              <td>{{ obj.hotPlace }}</td>
            </tr>
            <tr>
              <td>动火时间</td>
              <td>{{ obj.hotTime | dateFormat("YYYY-MM-DD HH:mm:ss") }}</td>
              <td>动火内介质</td>
              <td>{{ obj.hotInnerMedium }}</td>
            </tr>
            <tr>
              <td>动火部位</td>
              <td colspan="3">{{ obj.hotPart }}</td>
            </tr>
            <tr>
              <td>动火原因</td>
              <td colspan="3">{{ obj.hotReason }}</td>
            </tr>
            <tr>
              <td>动火作业主要人员</td>
              <td colspan="3">{{ obj.hotWorkUser }}</td>
            </tr>
            <tr>
              <td>动火方案是否审批：{{ obj.isApproval ? "是" : "否" }}</td>
              <td colspan="3">
                <div>其他附件（危害识别等）</div>
                <file-type :files="obj.otherFileUrl" />
              </td>
            </tr>
            <tr>
              <td>是否附图纸：{{ obj.isDrawing ? "是" : "否" }}</td>
              <td colspan="3">
                <div>图纸说明</div>
                <file-type :files="obj.drawingUrl" />
              </td>
            </tr>
            <tr>
              <td>有效期</td>
              <td colspan="3">
                从 {{ obj.startTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }} 到
                {{ obj.endTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <div>动火作业类型：</div>
                <el-radio-group v-if="obj.hotWorkType && obj.hotWorkType.length > 0" v-model="obj.hotWorkType">
                  <el-radio v-for="item in hotWorkTypeData" :key="item.code" disabled :label="item.code">
                    {{ item.name }}
                  </el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <div>可能产生的危害：</div>
                <el-radio-group v-if="obj.harmType && obj.harmType.length > 0" v-model="obj.harmType">
                  <el-radio v-for="item in possibleHazardsData" :key="item.code" disabled :label="item.code">
                    {{ item.name }}</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <div>相关许可落实情况：</div>
                <el-radio-group v-if="obj.licenseImplement && obj.licenseImplement.length > 0"
                  v-model="obj.licenseImplement">
                  <el-radio v-for="item in implementationData" :key="item.code" disabled :label="item.code">
                    {{ item.name }}</el-radio>
                </el-radio-group>
                <div>是否开展JSA分析：{{ obj.isJsa ? "是" : "否" }}</div>
                <div>相关说明：{{ obj.jsaDescribe }}</div>
                <div>JSA分析列表及管控措施：（附表）</div>
                <file-type :files="obj.jsaAnalysis" />
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <div>安全措施：</div>
                <el-radio-group v-if="obj.safetyType && obj.safetyType.length > 0" v-model="obj.safetyType">
                  <el-radio v-for="item in safetyMeasuresData" :key="item.code" disabled :label="item.code">
                    {{ item.name }}</el-radio>
                </el-radio-group>
              </td>
            </tr>
          </table>
          <table class="hot-gas-detect">
            <tr>
              <td>测试时间</td>
              <td v-for="(item, index) in obj.hotGasDetectList" :key="'测试时间' + index">
                {{ item.testTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
              </td>
              <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
            </tr>
            <tr>
              <td>测试位置</td>
              <td v-for="(item, index) in obj.hotGasDetectList" :key="'测试位置' + index">{{ item.testPlace }}</td>
              <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
            </tr>
            <tr>
              <td>氧气测试浓度%</td>
              <td v-for="(item, index) in obj.hotGasDetectList" :key="'氧气测试浓度' + index">{{ item.oxygen }}</td>
              <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
            </tr>
            <tr>
              <td>可燃气体浓度LEL%</td>
              <td v-for="(item, index) in obj.hotGasDetectList" :key="'可燃气体浓度LEL' + index">{{ item.flammableGas }}</td>
              <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
            </tr>
            <tr>
              <td>有毒气体浓度%</td>
              <td v-for="(item, index) in obj.hotGasDetectList" :key="'有毒气体浓度' + index">{{ item.toxicGas }}</td>
              <td v-for="(item, index) in 6 - obj.hotGasDetectList.length" :key="index" />
            </tr>
          </table>
          <table>
            <tr>
              <td colspan="5">
                <div>本人确认工作开始前气体检测已合格。</div>
                <div>
                  <span>检测人（动火作业单位监护人）：{{ obj.gasInspectorName }}</span>
                  <span style="padding-left:50px">确认人（属地单位监护人）：{{ obj.gasConfirmUserName }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="5">
                <div>
                  注明作业过程中气体测试要求（位置、频次等）：（当气体检测表格不够填时可按本许可证内容、格式另附气体检测表格，须在此处说明）
                </div>
                <div>{{ obj.gasTestRequire }}</div>
              </td>
            </tr>
            <tr>
              <td>安全监护人</td>
              <td colspan="4">
                <div>本人已阅读许可并且确信所以条件都满足，并承诺坚守现场。</div>
                <div>
                  <span>现场所有安全监护人：{{ obj.safetyUsername }}</span>
                  <span v-if="obj.safetyApproval"
                    style="padding-left:50px">{{ obj.safetyApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</span>
                  <span v-else />
                </div>
              </td>
            </tr>
            <tr>
              <td>相关方</td>
              <td colspan="4">
                <div>本人确认收到许可证，了解工作对本单位的影响，将安排人员对此项工作给予关注，并和相关各方保持联系。</div>
                <div>
                  <span>确认人： {{ obj.relatedUsername }}</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="5">
                <div>动火施工单位现场负责人签字：{{ obj.constructionUnitUsername }}</div>
                <div v-if="obj.constructionUnitApproval">
                  {{ obj.constructionUnitApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
                <div v-else />
              </td>
            </tr>
            <tr>
              <td colspan="5">
                <div>申请动火单位主管部门负责人签字：{{ obj.applyHotUnitUsername }}</div>
                <div v-if="obj.applyHotUnitApproval">
                  {{ obj.applyHotUnitApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
                <div v-else />
              </td>
            </tr>
            <tr>
              <td>上级主管部门（特级、一级动火）</td>
              <td>
                <div>生产调度运行部门签字：{{ obj.productionAdminUsername }}</div>
                <div v-if="obj.productionAdminApproval">
                  {{ obj.productionAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
                <div v-else />
              </td>
              <td>
                <div>资产设施管理部门签字：{{ obj.assetsAdminUsername }}</div>
                <div v-if="obj.assetsAdminApproval">
                  {{ obj.assetsAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
                <div v-else />
              </td>
              <td>
                <div>安全监管部门签字：{{ obj.safetyAdminUsername }}</div>
                <div v-if="obj.safetyAdminApproval">
                  {{ obj.safetyAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
                <div v-else />
              </td>
            </tr>
            <tr>
              <td>作业批准人（动火现场指挥）</td>
              <td colspan="4">
                <div>
                  我已审核过本许可证的相关文件，并确认符合公司动火安全管理规定的要求，同时我与相关人员一同检查过现场并同意动火方案，因此，我同意动火。
                </div>
                <div>
                  <span>签字：{{ obj.entAdminUsername }}</span>
                  <span v-if="obj.entAdminApproval" style="padding-left:50px">
                    {{ obj.entAdminApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                  </span>
                  <span v-else />
                </div>
              </td>
            </tr>
            <tr v-if="obj.delayInfo">
              <td>延期</td>
              <td>
                本许可证延期从 {{ obj.delayInfo.startTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }} 到
                {{ obj.delayInfo.endTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
              </td>
              <td>
                <div>申请人：{{ obj.delayInfo.username }}</div>
                <div>时间:{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
              </td>
              <td>
                <div>相关方：{{ obj.delayInfo.relatedUsername }}</div>
                <div>时间:{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
              </td>
              <td>
                <div>批准人或现场指挥：</div>
                <div>{{ obj.delayInfo.adminUsername }}</div>
                <div v-if="obj.delayInfo">时间:{{ obj.delayInfo.confirmTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
              </td>
            </tr>
            <tr v-if=" obj.closeInfo">
              <td>关闭</td>
              <td>
                动火作业结束后，监护人留守现场，确认无任何火源和隐患后关闭作业。 动火结束时间：{{
                  obj.closeInfo.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分")
                }}
              </td>
              <td>
                <div>申请人：{{ obj.closeInfo.username }}</div>
                <div>时间:{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
              </td>
              <td>
                <div>相关方：{{ obj.closeInfo.relatedUsername }}</div>
                <div>时间:{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
              </td>
              <td>
                <div>批准人或现场指挥：</div>
                <div>{{ obj.closeInfo.adminUsername }}</div>
                <div v-if="obj.closeInfo">时间:{{ obj.closeInfo.confirmTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
              </td>
            </tr>
            <tr v-if="obj.cancelInfo">
              <td>取消</td>
              <td colspan="2">
                <div>因以下原因，此许可证取消：{{ obj.cancelInfo.remark }}</div>
              </td>
              <td colspan="2">
                <div>申请人：{{ obj.cancelInfo.username }}</div>
                <div>时间:{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
                <div>相关方：{{ obj.cancelInfo.relatedUsername }}</div>
                <div>时间:{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
                <div>批准人或现场指挥：{{ obj.cancelInfo.adminUsername }}</div>
                <div v-if="obj.cancelInfo">
                  时间:{{ obj.cancelInfo.confirmTime | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="5">
                <div>变动备注栏（填写组织机构人员变动等实际情况）</div>
                <div>{{ obj.remark }}</div>
                <div>
                  <span>申请人：{{ obj.username }}</span>
                  <span style="padding-left:60px">批准人：{{ obj.entAdminUsername }}</span>
                </div>
                <div>{{ obj.ct | dateFormat("YYYY 年 MM 月 DD 日 HH 时 mm 分") }}</div>
              </td>
            </tr>
            <tr>
              <td colspan="5">
                注：1.本许可证一式四联：第一联由批准人持有，第二联由基层单位持有，第三联由现场监护人持有，第四联由施工单位现场负责人持有。
              </td>
            </tr>
          </table>
        </div>
        <el-form-item label-width="260px" label="动火作业安全技术措施及现场施工组织:" />
        <div style="padding-left: 200px;">
          <span class="isShowLiucheng" @click="toggleShow">{{ isShowLiucheng }}</span>
          <el-steps v-show="toggleConShow" direction="vertical"
            :active="obj.confirmStatus === 0 ? obj.nextGroup-1:obj.nextGroup">
            <el-step v-for="(item,index) in stepList">
              <template #description>
                <h3 v-if="index==1">安全监护人</h3>
                <p v-for="(i, s) in item" v-if="index==1" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{ !i.userInfo.username?'暂无':i.userInfo.username }} </span>
                </p>
                <h3 v-if="index==2">相关方</h3>
                <p v-for="(i, s) in item" v-if="index==2" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{ !i.userInfo.username?'暂无':i.userInfo.username }} </span>
                </p>
                <h3 v-if="index==3">动火施工单位主管部门负责人</h3>
                <p v-for="(i, s) in item" v-if="index==3" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{ !i.userInfo.username?'暂无':i.userInfo.username }} </span>
                </p>
                <h3 v-if="index==4">申请动火单位主管部门负责人</h3>
                <p v-for="(i, s) in item" v-if="index==4" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{ !i.userInfo.username?'暂无':i.userInfo.username }} </span>
                </p>
                <h3 v-if="index==5">上级主管部门</h3>
                <!-- <p v-for="(i, s) in item" v-if="index==5" :class="i.approvalStatus == 0?'a':'b'">
                    <span v-if="s==0">生产调度运行部门:</span>
                    <span v-if="s==1">资产设施管理部门:</span>
                    <span v-if="s==2">安全监管部门:</span>
                    <span>{{ !i.userInfo.username?'暂无':i.userInfo.username }} </span>
                  </p> -->

                <el-radio-group v-for="(i, s) in item" v-if="index==5" v-model="radio1"
                  :class="i.approvalStatus == 0?'a':'b'">
                  <p>
                    <el-radio v-if="s==0"
                      :disabled="(obj.nextGroup-1 === 4&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                      name="1" label="1">
                      生产调度运行部门:{{ i.userInfo.username }}
                    </el-radio>
                  </p>
                  <p>
                    <el-radio v-if="s==1"
                      :disabled="(obj.nextGroup-1 === 4&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                      name="2" label="2">
                      资产设施管理部门:{{ i.userInfo.username }}</el-radio>
                  </p>
                  <p>
                    <el-radio v-if="s==2"
                      :disabled="(obj.nextGroup-1 === 4&&i.approvalStatus==0&& i.approvalUserId == userId) ?false:true"
                      name="3" label="3">
                      安全监管部门:{{ i.userInfo.username }}
                    </el-radio>
                  </p>
                </el-radio-group>
                <h3 v-if="index==6">作业批准人</h3>
                <p v-for="(i, s) in item" v-if="index==6" :class="i.approvalStatus == 0?'a':'b'">
                  <span>{{ !i.userInfo.username?'暂无':i.userInfo.username }} </span>
                </p>
              </template>
            </el-step>
          </el-steps>
        </div>
        <div style="height: 20px;" />
        <el-form-item v-if="isShowBtn && obj.confirmStatus != 1" label="审批意见:" label-width="190px" prop="">
          <el-input ref="getMark" v-model="mark" type="textarea" placeholder="请输入审批意见" />
        </el-form-item>
      </el-form>

      <!-- 延期确认 -->
      <div v-if="obj.typeConfirmInfo">
        <el-form v-if="obj.confirmStatus==1 && obj.typeConfirmInfo.typeStatus == 1 ">
          <el-form-item label="延期时间:" label-width="190px">
            <p>
              {{ obj.delayInfo.startTime | dateFormat('YYYY-MM-DD hh:mm:ss') }} 至
              {{ obj.delayInfo.endTime | dateFormat('YYYY-MM-DD hh:mm:ss') }}
            </p>
          </el-form-item>
          <el-form-item label="备注:" label-width="190px">
            <p>{{ obj.delayInfo.remark }}</p>
          </el-form-item>
        </el-form>
        <!-- 取消确认 -->
        <el-form v-if="obj.confirmStatus==1 && obj.typeConfirmInfo.typeStatus == 2">
          <el-form-item label="取消原因:" label-width="190px">
            <p>{{ obj.cancelInfo.remark }}</p>
          </el-form-item>
        </el-form>

        <!-- 关闭确认 -->
        <el-form v-if=" obj.confirmStatus==1 && obj.typeConfirmInfo.typeStatus == 3">
          <el-form-item label="关闭原因:" label-width="190px">
            <p>{{ obj.closeInfo.remark }}</p>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button v-if="btnItems.delay" type="primary" round round @click="yanqiDialog=true">延期</el-button>
        <el-button v-if="btnItems.cancel" round @click="cancelDialog=true">取消</el-button>
        <el-button v-if="btnItems.close" round type="danger" round @click="closeDialog=true">关闭</el-button>
        <!-- 延期 取消 关闭 确认按钮 -->
        <el-button v-if="btnItems.confirm" type="primary" round @click="postConfirmHotbtn">确认</el-button>

        <!-- 审批确认 -->
        <el-button v-if="isShowBtn && obj.confirmStatus != 1" type="primary" @click="confromBtn">确 认</el-button>
        </el-button>
      </span>
    </el-dialog>
    <el-dialog title="延期" :visible.sync="yanqiDialog" width="40%" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close @close="modelClose('ruleForm')">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="200px">
        <el-row :gutter="50">
          <el-col :span="16">
            <el-form-item label="延期时间:" prop="yanqiTime">
              <el-date-picker v-model="ruleForm.yanqiTime" clearable type="datetimerange" value-format="timestamp"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="timeChange" />
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
              <el-input v-model="ruleForm.remark" type="input" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item label="通知相关人员:" prop="adminUserId">
              <el-select v-model="ruleForm.adminUserId" clearable multiple placeholder="请选择"
                @change="qiyerenyuanChange">
                <el-option v-for="(item,index) in qiyerenyuan" :key="index" :label="item.username"
                  :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="现场指挥:" prop="relatedUserId">
              <el-select v-model="ruleForm.relatedUserId" clearable placeholder="请选择" @change="zhihunChange">
                <el-option v-for="(item,index) in adminUserList" :key="index" :label="item.username"
                  :value="item.userId" />
              </el-select>
            </el-form-item>

          </el-col>

        </el-row>
        <p style="text-align: center">
          <el-button @click="yanqiDialog = false">取 消</el-button>
          <el-button type="primary" @click="yanqiBtn('ruleForm')">确 认</el-button>
        </p>
      </el-form>
    </el-dialog>
    <el-dialog title="取消" :visible.sync="cancelDialog" width="40%" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close @close="modelClose('cancelRuleForm')">
      <el-form ref="cancelRuleForm" :model="cancelRuleForm" :rules="cancelRules" label-width="200px">
        <el-row :gutter="50">
          <el-col :span="16">
            <el-form-item label="取消原因:" prop="cancelMark">
              <el-input v-model="cancelRuleForm.cancelMark" type="textarea" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="通知相关人员:" prop="adminUserId">
              <el-select v-model="cancelRuleForm.adminUserId" clearable multiple placeholder="请选择"
                @change="qiyerenyuanChange">
                <el-option v-for="(item,index) in qiyerenyuan" :key="index" :label="item.username"
                  :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="现场指挥:" prop="relatedUserId">
              <el-select v-model="cancelRuleForm.relatedUserId" clearable placeholder="请选择" @change="zhihunChange">
                <el-option v-for="(item,index) in adminUserList" :key="index" :label="item.username"
                  :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <p style="text-align: center">
          <el-button @click="cancelDialog = false">取 消</el-button>
          <el-button type="primary" @click="cancelBtn('cancelRuleForm')">确 认</el-button>
        </p>
      </el-form>

    </el-dialog>
    <el-dialog title="关闭" :visible.sync="closeDialog" width="40%" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close @close="modelClose('closeRuleForm')">
      <el-form ref="closeRuleForm" :model="closeRuleForm" :rules="closeRules" label-width="200px">
        <el-row :gutter="50">
          <el-col :span="16">
            <el-form-item label="动火时间:" prop="closeTime">
              <el-date-picker v-model="closeRuleForm.closeTime" clearable type="datetime" placeholder="选择日期时间"
                value-format="timestamp" @change="timeChange" />
            </el-form-item>
            <el-form-item label="关闭原因:" prop="closeMark">
              <el-input v-model="closeRuleForm.closeMark" type="textarea" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="通知相关人员:" prop="adminUserId">
              <el-select v-model="closeRuleForm.adminUserId" clearable multiple placeholder="请选择"
                @change="qiyerenyuanChange">
                <el-option v-for="(item,index) in qiyerenyuan" :key="index" :label="item.username"
                  :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="现场指挥:" prop="relatedUserId">
              <el-select v-model="closeRuleForm.relatedUserId" clearable placeholder="请选择" @change="zhihunChange">
                <el-option v-for="(item,index) in adminUserList" :key="index" :label="item.username"
                  :value="item.userId" />
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
        <p style="text-align: center">
          <el-button @click="closeDialog = false">取 消</el-button>
          <el-button type="primary" @click="closeBtn('closeRuleForm')">确 认</el-button>
        </p>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import WiseCrud from '../../../../components/Crud/wiseCrud'
  import {
    postHandle
  } from '../../../../api'
  import {
    imgPath
  } from '@/filters'

  import {
    formatTime,
    parseTime
  } from '@/utils'
  import FileType from '@/components/Crud/components/fileType'
  import {
    mixin
  } from './components/hotTicket'
  export default {
    name: 'UserManage',
    components: {
      WiseCrud,
      FileType
    },
    mixins: [mixin],
    data() {
      return {
        handle: [],
        urls: {
          list: '/api/v1/welder-sbtx-second/hot-ticket-comb/list',
          show: '/api/v1/welder-sbtx-second/hot-ticket-comb/show/',
          confirmList: '/api/v1/welder-sbtx-second/approval-process-comb/process-confirm-list',
          confirmPost: '/api/v1/welder-sbtx-second/hot-ticket-comb/process-confirm/',
          operation: '/api/v1/welder-sbtx-second/hot-ticket-comb/create-hot-ticket-other',
          userList: '/api/v1/welder-uac-second/space-user-member-comb/get-list',
          isShowBtn: '/api/v1/welder-sbtx-second/hot-ticket-comb/button-exhibition/',
          confirmHot: '/api/v1/welder-sbtx-second/hot-ticket-comb/confirm-hot-ticket-other/',
          adminUser: '/api/v1/welder-uac-second/space-user-member-role-comb/get-user-info-by-roles/'
        },
        stepList: [],
        viewDialog: false,
        obj: {},
        isShowLiucheng: '收起流程进度',
        imgUrl: [],
        mark: '',
        tableData: [],
        isShowBtn: false,
        toggleConShow: true,
        id: '',
        obj: {
          hotGasDetectList: [],
          delayInfo: {},
          cancelInfo: {},
          closeInfo: {}
        },
        yanqiDialog: false,
        cancelDialog: false,
        closeDialog: false,
        isAddClass: false,
        otimevalue: [],
        qiyerenyuan: [],
        adminUserList: [],
        value1: [],
        value2: [],
        value: '',
        radio1: null,
        radio: '',
        objId: '',
        rules: {
          remark: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          adminUserId: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          relatedUserId: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          yanqiTime: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }]

        },
        // adminUserId: '',
        // relatedUserId: '',
        btnItems: {},
        ruleForm: {
          yanqiTime: [],
          adminUserId: '',
          remark: '',
          relatedUserId: ''
        },
        yanqiStartTime: '',
        yanqiEndTime: '',
        cancelRules: {
          cancelMark: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          adminUserId: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          relatedUserId: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }]
        },
        cancelRuleForm: {
          adminUserId: '',
          cancelMark: '',
          relatedUserId: ''
        },
        closeRuleForm: {
          closeTime: '',
          closeMark: ''
        },
        closeRules: {
          closeTime: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          closeMark: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          adminUserId: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }],
          relatedUserId: [{
            required: true,
            message: '必填项不能为空',
            trigger: 'blur'
          }]
        }

      }
    },
    computed: {
      userId() {
        return this.$store.state.user.userId
      },
      spaceId() {
        return this.$store.getters.entSpaceId
      }
    },
    created() {
      this.getuserList()
      this.getList()
      this.getAdminUserList()
    },
    methods: {
      getAdminUserList() {
        let params = {
          'obj': {
            'roleCodes': ['entAdmin'],
            'spaceId': '',
            'spaceProperty': 2 // 默认为 2  1项目 2企业
          }
        }
        postHandle(this.urls.adminUser, params).then(res => {
          this.adminUserList = res.result
        })
      },
      // 企业负责人
      getuserList() {
        // postHandle(this.urls.userList).then((res) => {
        //   this.qiyerenyuan = res.result
        // });
        let params = {
          'obj': {
            'roleCodes': ['formalEmployee'],
            'spaceId': '',
            'spaceProperty': 2 // 默认为 2  1项目 2企业
          }
        }
        postHandle(this.urls.adminUser, params).then(res => {
          this.qiyerenyuan = res.result
        })
      },
      // 查看
      viewHandle(dataId) {
        this.getSetpList(dataId)
        this.viewDialog = true
      },
      modelClose1() {
        this.getList()
      },
      getList() {
        let params = {
          d: {
            filters: [{
              field: 'entSpaceId',
              operator: 'EQUALS',
              value: this.$store.getters.entSpaceId
            }],
            page: {
              p: 1,
              ps: 99999
            },
            retPage: true
          }
        }
        postHandle(this.urls.list, params).then((res) => {
          this.tableData = res.result
        })
      },
      // 详情
      getObjectId(dataId) {
        this.id = dataId
        this.isShowBtn = false
        postHandle(this.urls.show + dataId).then(res => {
          this.obj = res.result
          this.getShowBtn()
          let {
            hotWorkType,
            harmType,
            licenseImplement,
            safetyType
          } = this.obj

          this.obj.hotWorkType = hotWorkType.split(',')
          this.obj.harmType = harmType.split(',')
          this.obj.licenseImplement = licenseImplement.split(',')
          this.obj.safetyType = safetyType.split(',')

          let userId = this.userId
          let nextGroup = res.result.nextGroup
          let nextLevel = res.result.nextLevel
          let otempObj = this.stepList[res.result.nextGroup]

          for (let a in otempObj) {
            if (userId === otempObj[a].approvalUserId && otempObj[a].approvalStatus === 0) {
              this.isShowBtn = true
              if (this.obj.nextGroup - 1 == 4) {
                this.radio1 = (Number(a) + 1).toString()
              }
              this.objId = otempObj[a].id
            }
          }

          if (res.result.sketchMap) {
            let a = res.result.sketchMap.match(/(\;)/)
            if (a.length > 1) {
              this.imgUrl = res.result.sketchMap.split(';')
            } else {
              this.imgUrl = []
            }
          }
        })
      },
      // 步骤
      getSetpList(dataId) {
        let params = {
          d: {
            filters: [{
              'field': 'dataId',
              'operator': 'EQUALS',
              'value': dataId
            }]
          }
        }
        postHandle(this.urls.confirmList, params).then(res => {
          this.stepList = res.result
          this.getObjectId(dataId)
        })
      },

      // 审批确认
      confromBtn() {
        let params = {
          'obj': {
            approvalComments: this.mark,
            id: this.objId
          }
        }
        postHandle(this.urls.confirmPost + this.id, params).then(res => {
          if (res._rd) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getList()
            this.viewDialog = false
            this.mark = ''
          }
        })
      },

      // 延期 取消 关闭按钮是否显示
      getShowBtn() {
        postHandle(this.urls.isShowBtn + this.id).then(res => {
          this.btnItems = res.result
        })
      },
      // 延期1  取消2  关闭3
      yanqiBtn(formName) {
        let params = {
          obj: {
            dataId: this.id,
            startTime: this.yanqiStartTime,
            endTime: this.yanqiEndTime,
            remark: this.ruleForm.remark,
            typeStatus: 1,
            relatedUserId: this.relatedUserId,
            adminUserId: this.adminUserId
          }
        }
        this.postOperation(params, formName)
      },

      cancelBtn(formName) {
        let params = {
          obj: {
            dataId: this.id,
            remark: this.cancelRuleForm.cancelMark,
            typeStatus: 2,
            relatedUserId: this.relatedUserId,
            adminUserId: this.adminUserId
          }
        }
        this.postOperation(params, formName)
      },
      closeBtn(formName) {
        let params = {
          obj: {
            dataId: this.id,
            remark: this.closeRuleForm.closeMark,
            endTime: this.closeRuleForm.closeTime,
            typeStatus: 3,
            relatedUserId: this.relatedUserId,
            adminUserId: this.adminUserId
          }
        }
        this.postOperation(params, formName)
      },
      postOperation(params, formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            postHandle(this.urls.operation, params).then(res => {
              if (res._rd) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.yanqiDialog = false
                this.cancelDialog = false
                this.closeDialog = false
                this.$nextTick(() => {
                  if (this.$refs.ruleForm) {
                    this.$refs.ruleForm.resetFields()
                  }
                })
                this.$nextTick(() => {
                  if (this.$refs.cancelRuleForm) {
                    this.$refs.cancelRuleForm.resetFields()
                  }
                })
                this.$nextTick(() => {
                  if (this.$refs.closeRuleForm) {
                    this.$refs.closeRuleForm.resetFields()
                  }
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 延期确认

      postConfirmHotbtn() {
        if (this.mark !== '') {
          postHandle(this.urls.confirmHot + this.id).then(res => {
            if (res._rd) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.viewDialog = false
            }
          })
        } else {
          this.$message.error('请输入备注')
        }
      },
      modelClose(formName) {
        if (this.$refs[formName] !== undefined) {
          this.$nextTick(() => {
            this.$refs[formName].resetFields()
          })
        }
      },
      // 查看大图
      getSrcList(str) {
        let arr = []
        if (str) {
          arr = str.split(';')
        }
        return arr.map(item => imgPath(item))
      },
      timeChange(val) {
        this.yanqiStartTime = val[0],
          this.yanqiEndTime = val[1]
      },
      qiyerenyuanChange(val) {
        this.relatedUserId = val.toString()
      },
      zhihunChange(val) {
        this.adminUserId = val
      },
      toggleShow() {
        if (this.isShowLiucheng == '收起流程进度') {
          this.isShowLiucheng = '查看流程进度'
          this.toggleConShow = false
        } else if (this.isShowLiucheng == '查看流程进度') {
          this.isShowLiucheng = '收起流程进度'
          this.toggleConShow = true
        }
      }

    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-step__head.is-process {
    color: #1890ff;
    border-color: #1890ff;
  }

  /deep/ .el-step__title.is-process {
    color: #1890ff;
  }

  /deep/ .el-step__description.is-process {
    color: #1890ff;
  }

  .img {
    width: 150px;
    height: 150px;
  }

  .confrimbtns {
    margin-bottom: 60px;
  }

  /deep/ .el-image {
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 20px;
    background: #f6f6f6;
  }

  h4 {
    cursor: pointer;
    color: #1890ff;
  }

  .isShowLiucheng {
    cursor: pointer;
    color: #1890ff;
    display: inline-block;
    padding-bottom: 20px;
  }

  .title {
    text-align: center;
    border: none;
    margin-bottom: 20px;
  }

  .number {
    text-align: right;
    border: none;
    width: 95%;
    margin-bottom: 20px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid;
    text-align: left;

    td {
      line-height: 22px;
      border: 1px solid;
      padding: 14px;
    }

    td:nth-child(odd) {
      width: 20%;
    }
  }

  .hot-gas-detect {
    td:nth-child(1) {
      width: 16%;
    }

    td:nth-child(odd) {
      width: initial;
    }

    td:not(:nth-child(1)) {
      width: 14%;
    }
  }

  .hot-gas-detect+table {
    td:nth-child(odd) {
      width: initial;
    }

    td {
      width: 20%;
    }
  }

  .image {
    width: 100px;
    height: 100px;
  }

  /deep/ .el-form-item__content {
    /* width: 100% */
  }

  .b {
    .el-radio {
      /deep/ .el-radio__label {
        color: #1890ff
      }
    }
  }

  .a {
    color: #969799
  }

  .padding10 {
    padding-right: 50px;
  }

  /deep/ .el-radio-group {
    width: 100%
  }
</style>